<html>
	<head>
		<title>nTube: Channel</title>
		<meta charset="UTF-8" />
		<meta name="application-name" content="nTube" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="theme-color" content="#282828" />
		<meta name="description" content="nTube: Channel." />
		<meta name="robots" content="noindex, nofollow" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<link rel="preload" href="resources/settings.js" as="script" />
		<link rel="preload" href="resources/search.js" as="script" />
		<link rel="preload" href="resources/ntube_next/nTubeNextAPI.js" as="script" />
		<link rel="preload" href="resources/commander.js" as="script" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/ntube_next/nTubeNextAPI.js"></script>
		<script src="resources/settings.js"></script>
		<script src="resources/search.js"></script>
		<script src="resources/commander.js"></script>
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png" />
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
		<link rel="stylesheet" type="text/css" href="resources/commander.css" />
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="collapsible-css">
			.active,
			.collapsible:hover {
				background-color: #555;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}

			.menu-item {
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}

			.yt-uix-sessionlink {
				color: inherit;
			}

			.collapsible {
				background: inherit;
				border: none;
				border-bottom: 2px solid green;
				color: inherit;
				cursor: pointer;
				padding: 12px;
				margin-left: -5px;
				width: calc(100% + 5px);
				text-align: left;
				outline: none;
				font-size: 15px;
				font-family: inherit;
			}

			.content {
				padding: 0 18px;
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.2s ease-out;
				background-color: inherit;
			}

			.dropbtn {
				color: white;
				background: inherit;
				padding: 16px;
				font-size: 16px;
				border: none;
				padding-top: 5px;
				padding-left: 5px;
				width: 40px;
				height: 40px;
			}

			.dropdown {
				position: relative;
				display: inline-block;
				background: inherit;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: black;
				color: inherit;
				border: 1px solid green;
				padding-left: 5px;
				width: 320px;
				margin-left: -287px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
				z-index: 1;
				line-height: 60%;
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}

			.dropdown:hover .dropbtn {
				background-color: #3e8e41;
			}

			.drop_area_dtpui {
				--droppable: 1;
			}

			* {
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, "Product Sans", "Google Sans", "Segoe UI", "Arial", "Roboto", sans-serif;
			}
		</style>
		<script>
			function makeHover(url) {
				if (window.__allow_drag_drop_portals) {
					addPreviewPortal(url, "br");
				}
			}
			function appendVideos(jsonObject) {
				appendVideos(jsonObject, "TYPE_VIDEOS");
			}
			function appendVideos(jsonObject, type) {
				const metadata = jsonObject.metadata;
				if (metadata.isMusicChannel) {
					const albums = jsonObject.albums;
					const __albums = id("channel_albums");
					for (var i = 0; i < albums.length; i++) {
						const album = albums[i];
						var core_div = document.createElement("div");
						core_div.classList.add("album_entry");
						core_div.classList.add("poly-item");
						var link = document.createElement("a");
						link.href = album.url;
						link.style.paddingLeft = "0px";
						link.style.textDecoration = "none";
						link.style.color = "inherit";
						core_div.appendChild(link);
						var image = document.createElement("img");
						image.style.width = "128px";
						image.style.height = "128px";
						image.src = album.thumbnail;
						image.loading = "lazy";
						image.decoding = "async";
						image.referrerPolicy = "no-referrer";
						link.appendChild(image);
						var title = document.createElement("h3");
						title.innerHTML = album.title;
						link.appendChild(title);
						var tracks = document.createElement("p");
						if (album.count == 1) {
							tracks.innerHTML = album.count + " track.";
						} else {
							tracks.innerHTML = album.count + " tracks.";
						}
						link.appendChild(tracks);
						__albums.appendChild(core_div);
					}
				} else {
					var videos;
					if (type == "TYPE_LIVESTREAMS") {
						videos = id("channel_live");
					} else if (type == "TYPE_SHORTS") {
						videos = id("channel_shorts");
					} else {
						videos = id("channel_videos");
					}
					for (var i = 0; i < jsonObject.videos.length; i++) {
						const video = jsonObject.videos[i];
						const videoDiv = document.createElement("div");
						videoDiv.setAttribute("draggable", "true");
						videoDiv.addEventListener("dragstart", function (event) {
							if (window.__allow_drag_drop_portals) {
								event.dataTransfer.setData("url/plain", video.url);
								if (isHidden(id("drag_to_preview_ui"))) {
									id("drag_to_preview_ui").style.visibility = "";
									id("drag_to_preview_ui").style.display = "flex";
								}
							}
						});
						videoDiv.addEventListener("dragend", function (event) {
							if (window.__allow_drag_drop_portals) {
								if (!isHidden(id("drag_to_preview_ui"))) {
									id("drag_to_preview_ui").style.visibility = "hidden";
									id("drag_to_preview_ui").style.display = "none";
								}
							}
						});
						videoDiv.addEventListener("dragover", function (event) {
							if (window.__allow_drag_drop_portals) {
								event.preventDefault();
							}
						});
						videoDiv.classList.add("channel_video", "poly-item", "channel_video_poly");
						videoDiv.style.marginBottom = "5px";
						const link1 = document.createElement("a");
						link1.href = video.url;
						const image2 = document.createElement("img");
						image2.style.verticalAlign = "middle";
						image2.style.display = "table-row";
						image2.style.width = "160px";
						image2.style.height = "90px";
						image2.loading = "lazy";
						image2.decoding = "async";
						image2.referrerPolicy = "no-referrer";
						if (isValidObject(video["ani_thumb"])) {
							const im = video.thumbnail;
							const ia = video.ani_thumb;
							image2.src = im;
							image2.onmouseover = function () {
								image2.src = ia;
							};
							image2.onmouseout = function () {
								image2.src = im;
							};
						} else {
							image2.src = video.thumbnail;
						}
						link1.appendChild(image2);
						videoDiv.appendChild(link1);
						var contentDiv = document.createElement("div");
						contentDiv.classList.add("channel_video_idiv");
						contentDiv.style.verticalAlign = "middle";
						contentDiv.style.paddingLeft = "5px";
						contentDiv.style.paddingRight = "5px";
						var videoTitle = document.createElement("h3");
						videoTitle.style.verticalAlign = "middle";
						videoTitle.style.margin = "0px auto";
						videoTitle.innerHTML = video.title;
						contentDiv.appendChild(videoTitle);
						var videoDescription = document.createElement("p");
						videoDescription.style.verticalAlign = "bottom";
						videoDescription.style.margin = "0px";
						videoDescription.style.fontSize = "small";
						if (video.duration == -2) {
							videoDescription.innerHTML = "LIVE";
						} else if (video.duration == -3) {
							videoDescription.innerHTML = "UPCOMING";
							if (video["startTime"]) {
								const __st0 = video["startTime"] * 1000;
								const __remaining = ((__st0 - Date.now()) / 1000).toFixed(0);
								videoDescription.innerHTML += " &centerdot; " + seconds2time(__remaining) + " remaining.";
							}
						} else if (video.duration == -4) {
							videoDescription.innerHTML = "SHORTS";
						} else {
							videoDescription.innerHTML = seconds2time(video.duration);
						}
						contentDiv.appendChild(videoDescription);
						videoDiv.appendChild(contentDiv);
						videos.appendChild(videoDiv);
					}
				}
			}
			function loadMore(cont, channelID) {
				if (cont === null || cont === undefined || cont.length === 0) {
					return;
				} else {
					run_async(function () {
						document.body.style.cursor = "wait";
					});
					id("--load-more-videos").disabled = true;
					id("--load-more-videos").innerHTML = "Fetching...";
					request(
						"/api/channel?c=" + channelID + "&cont=" + cont + "&backend=channel",
						null,
						function (error) {
							console.error(error);
							run_async(function () {
								document.body.style.cursor = "";
							});
							alert("Failed to load more videos.\nSorry about that :/");
							id("--load-more-videos").disabled = false;
							id("--load-more-videos").innerHTML = "Load more.";
						},
						function (data) {
							const jsonObject = JSON.parse(data);
							window.jsonObject = jsonObject;
							run_async(function () {
								document.body.style.cursor = "";
							});
							if (jsonObject.error) {
								console.error(jsonObject);
								if (jsonObject.error.reason && jsonObject.error.reason === "NCAPTCHA_SOLUTION_REQUIRED") {
									alert("nCaptcha: Captcha required!\nYour session token has expired and you will need to reload and do a challenge to continue.\nSorry about that. :/");
								} else {
									alert("Failed to load more videos.\nSorry about that :/");
								}
								id("--load-more-videos").disabled = false;
								id("--load-more-videos").innerHTML = "Load more.";
							} else {
								appendVideos(jsonObject);
								if (jsonObject.continuation) {
									id("--load-more-videos").onclick = function () {
										loadMore(jsonObject.continuation, channelID);
									};
									id("--load-more-videos").disabled = false;
									id("--load-more-videos").innerHTML = "Load more.";
								} else {
									id("--load-more-videos").disabled = true;
									id("--load-more-videos").innerHTML = "No more videos found.";
								}
							}
						}
					);
				}
			}
			function exists(locl, channelID) {
				if (locl === null || locl === undefined) {
					console.warn("exists(locl, channelID): Invalid locl object! Bailing out.\nYou should nag at the developer about this.");
					return false;
				}
				for (var i = 0; i < locl.length; i++) {
					const l = locl[i];
					if (l["channelID"] === channelID) {
						return true;
					}
				}
				return false;
			}
			function __fetch_shorts(channelID) {
				request(
					"/api/channel?c=" + channelID + "&backend=shorts",
					null,
					function (error) {
						console.error(error);
						run_async(function () {
							document.body.style.cursor = "";
						});
						alert("Failed to load shorts.\nSorry about that :/");
					},
					function (data) {
						const jsonObject = JSON.parse(data);
						run_async(function () {
							document.body.style.cursor = "";
						});
						if (jsonObject.error) {
							console.error(jsonObject);
							alert("Failed to load shorts.\nSorry about that :/");
						} else {
							appendVideos(jsonObject, "TYPE_SHORTS");
						}
					}
				);
			}
			function __fetch_livestreams(channelID) {
				request(
					"/api/channel?c=" + channelID + "&backend=livestreams",
					null,
					function (error) {
						console.error(error);
						run_async(function () {
							document.body.style.cursor = "";
						});
						alert("Failed to load livestreams.\nSorry about that :/");
					},
					function (data) {
						const jsonObject = JSON.parse(data);
						run_async(function () {
							document.body.style.cursor = "";
						});
						if (jsonObject.error) {
							console.error(jsonObject);
							alert("Failed to load livestreams.\nSorry about that :/");
						} else {
							appendVideos(jsonObject, "TYPE_LIVESTREAMS");
						}
					}
				);
			}
			function __init() {
				const __channelID = getQueryVariable("c");
				if (__channelID == null) {
					console.warn("channelID not found, not extracting.");
					return;
				} else {
					run_async(function () {
						id("--load-more-shorts").onclick = function () {
							id("--load-more-shorts").disabled = true;
							id("--load-more-shorts").innerHTML = "Fetching...";
							__fetch_shorts(__channelID);
						};
						id("--load-more-live").onclick = function () {
							id("--load-more-live").disabled = true;
							id("--load-more-live").innerHTML = "Fetching...";
							__fetch_livestreams(__channelID);
						};
					});
					request(
						"/api/channel?c=" + __channelID,
						null,
						function (error) {
							console.error(error);
							run_async(function () {
								document.body.style.cursor = "";
							});
							alert("Failed to load channel metadata.\nSorry about that :/");
						},
						function (data) {
							const jsonObject = JSON.parse(data);
							window.jsonObject = jsonObject;
							run_async(function () {
								document.body.style.cursor = "";
							});
							if (jsonObject.error) {
								console.error(jsonObject);
								alert("Failed to load channel metadata.\nSorry about that :/");
							} else {
								const metadata = jsonObject.metadata;
								if (metadata.isMusicChannel) {
									if (metadata.channelName) {
										document.title = metadata.channelName + " - nTube";
										id("channel_name").innerHTML = metadata.channelName;
									} else {
										document.title = "[PH] Music Channel" + " - nTube";
										id("channel_name").innerHTML = "[PH] Music Channel";
									}
									id("_div_ms_notice").style.display = "";
									id("_div_ms_notice").style.visibility = "";
									id("_div_albums").style.display = "";
									id("_div_albums").style.visibility = "";
									id("_div_videos").style.display = "none";
									id("_div_videos").style.visibility = "hidden";
									appendVideos(jsonObject);
									if (jsonObject.continuation) {
										id("--load-more-videos").onclick = function () {
											loadMore(jsonObject.continuation, __channelID);
										};
										id("--load-more-videos").disabled = false;
									}
								} else {
									document.title = metadata.channelName + " - nTube";
									id("channel_name").innerHTML = metadata.channelName;
									if (metadata.images) {
										id("channel_info_div").style.backgroundImage = "url(" + metadata.images.qualityBanner + ")";
										id("channel_info_div").style.backgroundSize = "cover !important";
										id("channel_info_div").style.backgroundRepeat = "no-repeat !important";
									}
									if (metadata.description) {
										id("channel_description").innerHTML = metadata.description;
									}
									if (metadata.subscribers) {
										if (metadata.subscribers == -1) {
											id("channel_subscriber_count").innerHTML = "N/A";
										} else {
											id("channel_subscriber_count").innerHTML = numberWithCommas(metadata.subscribers);
										}
									}
									window.Channel = {
										channelID: __channelID,
										channelName: metadata.channelName,
									};
									if (metadata["avatarURL"]) {
										window.Channel["avatarURL"] = metadata["avatarURL"];
									}
									try {
										if (jsonObject.videos && jsonObject.videos.length > 0) {
											window.Channel["lastVideoID"] = jsonObject.videos[0].videoID;
										}
									} catch (e) {
										console.error(e);
									}
									Object.freeze(window.Channel);
									const videos = id("channel_videos");
									videos.innerHTML = "";
									appendVideos(jsonObject);
									if (jsonObject.continuation) {
										id("--load-more-videos").onclick = function () {
											loadMore(jsonObject.continuation, __channelID);
										};
										id("--load-more-videos").disabled = false;
									}
								}
							}
						}
					);
					run_async(function () {
						document.body.style.cursor = "wait";
					});
					run_async(function () {
						id("-subscribe-button").onclick = function () {
							const localSettings = nTubeSettings.auto();
							const locl = localSettings["global"]["subscriptions"];
							if (exists(locl, __channelID)) {
								id("-subscribe-button").disabled = false;
								id("-subscribe-button").innerHTML = "Unsubscribe.";
								var obj = null;
								for (var i = 0; i < locl.length; i++) {
									const l = locl[i];
									if (l["channelID"] === __channelID) {
										obj = l;
										break;
									}
								}
								if (obj === null || obj === undefined) return;
								locl.remByVal(obj);
								nTubeSettings.save(localSettings);
								id("-subscribe-button").innerHTML = "Subscribe.";
							} else {
								if (!window.Channel || !("lastVideoID" in window.Channel)) return;
								if (localSettings["global"]["subscriptions"]) {
									const locl0 = localSettings["global"]["subscriptions"];
									if (exists(locl0, window.Channel.channelID)) {
										alert("Error.\nYou are already subscribed!");
									} else {
										localSettings["global"]["subscriptions"].push(window.Channel);
										id("-subscribe-button").innerHTML = "Unsubscribe.";
									}
								} else {
									localSettings["global"]["subscriptions"] = [];
									localSettings["global"]["subscriptions"].push(window.Channel);
									id("-subscribe-button").innerHTML = "Unsubscribe.";
								}
								nTubeSettings.save(localSettings);
							}
						};
						id("-subscribe-button").disabled = false;
						const localSettings = nTubeSettings.auto();
						if (localSettings && !localSettings["global"]) localSettings["global"] = {};
						if (localSettings && !localSettings["global"]["subscriptions"]) localSettings["global"]["subscriptions"] = [];
						const locl1 = localSettings["global"]["subscriptions"];
						if (exists(locl1, __channelID)) {
							id("-subscribe-button").innerHTML = "Unsubscribe.";
						}
					});
				}
			}
			function fetch_community_feed() {
				return fetch_community_feed(null);
			}
			function fetch_community_feed(cont) {
				var channelID = getQueryVariable("c");
				if (channelID == null) {
					console.warn("channelID not found, not fetching.");
					return;
				} else {
					var __url = "/api/channel?c=" + channelID + "&backend=community";
					if (cont !== null && cont !== undefined && cont.length > 0) {
						__url += "&cont=" + cont;
					}
					request(
						__url,
						null,
						function (error) {
							console.error(error);
							alert("Failed to load the community feed.\nSorry about that :/");
						},
						function (data) {
							const jsonObject = JSON.parse(data);
							if (jsonObject["continuation"]) {
								id("--load-community-feed").setAttribute("next-cont", jsonObject["continuation"]);
								id("--load-community-feed").disabled = false;
								id("--load-community-feed").innerHTML = "Load more.";
							} else {
								id("--load-community-feed").setAttribute("next-cont", "");
								id("ui-tab-Community-load-div").style.display = "none";
								id("ui-tab-Community-load-div").style.visibility = "hidden";
							}
							if (jsonObject["entries"]) {
								const entries = jsonObject["entries"];
								for (var i = 0; i < entries.length; i++) {
									const entry = entries[i];
									const d = document.createElement("div");
									d.classList.add("poly-item");
									d.classList.add("community-feed-entry");
									const au = document.createElement("h5");
									au.classList.add("community-feed-text");
									au.innerHTML = entry["author"];
									d.appendChild(au);
									const ct = document.createElement("h4");
									ct.classList.add("community-feed-text");
									ct.innerHTML = entry["content"];
									d.appendChild(ct);
									if (entry["images"] && entry["images"].length > 0) {
										const images = entry["images"];
										for (var ie = 0; ie < images.length; ie++) {
											const image = images[ie];
											const highestRes = image[image.length - 1];
											const img = document.createElement("img");
											img.decoding = "async";
											img.loading = "lazy";
											img.classList.add("community-feed-image");
											img.src = highestRes["url"];
											img.referrerPolicy = "no-referrer";
											d.appendChild(img);
										}
									}
									if (entry["videos"] && entry["videos"].length > 0) {
										const video = entry["videos"][0]; // TODO: Add multi-video support.
										const emb = document.createElement("iframe");
										emb.classList.add("community-feed-video");
										emb.frameBorder = 0;
										emb.src = "/embed?v=" + video["videoID"];
										d.appendChild(emb);
									}
									if (entry["polls"] && entry["polls"].length > 0) {
										const poll = entry["polls"][0]; // TODO: Add multi-poll support.
										const p = document.createElement("div");
										if (poll["options"]) {
											const opts = poll["options"];
											for (var iea = 0; iea < opts.length; iea++) {
												const r = document.createElement("div");
												r.classList.add("poly-item", "community-feed-poll");
												const l = document.createElement("h3");
												l.classList.add("community-feed-poll-text");
												l.innerText = opts[iea];
												r.appendChild(l);
												p.appendChild(r);
											}
										}
										d.appendChild(p);
									}
									id("--community-feed").appendChild(d);
								}
							}
						}
					);
				}
			}
			function fetch_playlists() {
				var channelID = getQueryVariable("c");
				if (channelID == null) {
					console.warn("channelID not found, not fetching.");
					return;
				} else {
					request(
						"/api/get_page?backend=playlist",
						JSON.stringify({
							page: "channel_playlists",
							channelID: channelID,
						}),
						function (error) {
							console.error(error);
							alert("Failed to load playlists.\nSorry about that :/");
						},
						function (data) {
							const jsonObject = JSON.parse(data);
							if (!jsonObject["error"] && jsonObject["result"]) {
								const playlist_info = jsonObject["result"];
								const playlists = playlist_info["videos"];
								const playlists_div = id("channel_playlists");
								for (var i = 0; i < playlists.length; i++) {
									const playlist = playlists[i];
									const playlistDiv = document.createElement("div");
									playlistDiv.classList.add("channel_video", "poly-item", "channel_video_poly");
									playlistDiv.style.marginBottom = "5px";
									const link2 = document.createElement("a");
									link2.href = playlist["url"];
									const image3 = document.createElement("img");
									image3.style.verticalAlign = "middle";
									image3.style.display = "table-row";
									image3.style.width = "160px";
									image3.style.height = "90px";
									image3.loading = "lazy";
									image3.decoding = "async";
									image3.referrerPolicy = "no-referrer";
									image3.src = playlist["thumbnail"];
									link2.appendChild(image3);
									playlistDiv.appendChild(link2);
									var contentDiv = document.createElement("div");
									contentDiv.classList.add("channel_video_idiv");
									contentDiv.style.verticalAlign = "middle";
									contentDiv.style.paddingLeft = "5px";
									contentDiv.style.paddingRight = "5px";
									var videoTitle = document.createElement("h3");
									videoTitle.style.verticalAlign = "middle";
									videoTitle.style.margin = "0px auto";
									videoTitle.innerHTML = playlist["title"];
									contentDiv.appendChild(videoTitle);
									var videoDescription = document.createElement("p");
									videoDescription.style.verticalAlign = "bottom";
									videoDescription.style.margin = "0px";
									videoDescription.style.fontSize = "small";
									videoDescription.innerHTML = "PLAYLIST";
									contentDiv.appendChild(videoDescription);
									playlistDiv.appendChild(contentDiv);
									playlists_div.appendChild(playlistDiv);
								}
							} else {
								console.error(jsonObject["error"]);
								alert("Failed to load playlists!\nAn internal error occurred.");
							}
						}
					);
				}
			}

			window.addEventListener("DOMContentLoaded", function (event) {
				run_async(__init);
			});
		</script>
	</head>

	<body style="overflow-x: hidden">
		<div class="menu">
			<div class="menu-item">
				<p style="padding-left: 5px; margin-top: 5px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px; margin-bottom: 10px; width: auto">
					<span style="color: red">n</span><span id="ntube_main_menu_tube_label" style="color: lightgreen">Tube</span>
					<sub id="ntube_version_main_menu_label" style="font-size: 0.9em; line-height: 25%">1.5.0</sub>
					<img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" decoding="async" />
				</p>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/" title="Home Page">
						<img src="resources/icons/home.svg" alt="home" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_async(function () {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<div style="width: 100%">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 15px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit; font-family: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				run_async(function () {
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="commander_overlay" class="commander_overlay" style="display: none; visibility: hidden">
			<div id="commander_main_div" class="commander_mdiv">
				<input id="commander_text_input" class="commander_text_box" type="text" value="" placeholder="nTube Commander." />
				<p class="commander_text_out" id="commnader_text_output" style="display: none; visibility: hidden">Ready.</p>
			</div>
		</div>
		<noscript>
			<div class="poly-item" style="border: 1px solid orangered; margin-top: 60px">
				<h2 style="margin-top: 5px; margin-bottom: 5px">JavaScript required.</h2>
				<p style="margin-top: 5px; margin-bottom: 5px">This page requires JavaScript in order to run.</p>
			</div>
		</noscript>
		<style>
			.shadowed-text {
				text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
			}

			.flat-button {
				border: 1px solid rgba(0, 255, 40, 0.5);
				padding: 5px;
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(5px);
			}

			.flat-button:disabled {
				filter: grayscale(1);
			}
		</style>
		<style>
			.ui-tab {
				overflow: hidden;
				background-color: rgba(2, 2, 2, 0.3);
			}

			.ui-tab button {
				background-color: inherit;
				float: left;
				border: none;
				outline: none;
				cursor: pointer;
				padding: 14px 16px;
				transition: 0.41s;
				font-family: inherit;
				color: inherit;
			}

			.ui-tab button:hover {
				background-color: darkgray;
			}

			.ui-tab button.active {
				background-color: #444444;
			}

			.tabcontent {
				display: none;
				padding: 6px 12px;
				border-top: none;
				margin-left: -5px;
				margin-right: -5px;
				animation: fadeEffect 1s;
			}

			@keyframes fadeEffect {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}
		</style>
		<div
			id="channel_info_div"
			class="poly-item shadowed-text"
			style="margin-left: -11px; margin-right: -9px; background-size: cover !important; background-repeat: no-repeat !important; margin-top: -10px; border-bottom: 1px solid green; margin-bottom: 0px"
			decoding="async"
			loading="lazy"
		>
			<div style="margin-top: 18px">
				<h3 id="channel_name" style="float: left; vertical-align: middle">Loading.</h3>
				<div style="float: right; vertical-align: middle; margin-top: 5px">
					<p style="display: inline-block; vertical-align: middle"><span id="channel_subscriber_count">...</span></p>
					<span style="display: inline-block; vertical-align: middle">&nbsp;&centerdot;&nbsp;</span>
					<button id="-subscribe-button" disabled="true" class="flat-button" style="display: inline-block; vertical-align: middle; color: inherit; font-family: inherit; border-right: none">Subscribe.</button>
				</div>
				<div style="clear: both"></div>
			</div>
			<div class="ui-tab" style="margin-left: -5px">
				<button class="tablinks active" onclick="_ui_open(event, 'ui-tab-Videos')">Videos.</button>
				<button class="tablinks" onclick="_ui_open(event, 'ui-tab-Live')">Live.</button>
				<button class="tablinks" onclick="_ui_open(event, 'ui-tab-Shorts')">Shorts.</button>
				<button class="tablinks" onclick="_ui_open(event, 'ui-tab-Community')">Community.</button>
				<button class="tablinks" onclick="_ui_open(event, 'ui-tab-Playlists')">Playlists.</button>
				<button class="tablinks" onclick="_ui_open(event, 'ui-tab-About')">About.</button>
			</div>
			<!--<div class="shadowed-text" style="padding-left: 5px; padding-right: 10px; margin-top: -10px; margin-bottom: 20px; height: 20px;">
				<div style="float: right; margin-right: -10px; margin-top: -1px;">
					<p id="channel_subscriber_count" style="display: inline-block; vertical-align: middle;">N/A</p>
					<span style="display: inline-block; vertical-align: middle;">&nbsp;&centerdot;&nbsp;</span>
					<button class="flat-button" style="display: inline-block; vertical-align: middle; color: inherit; font-family: inherit;">Subscribe.</button>
				</div>
				<div style="clear: both;"></div>
			</div>-->
		</div>
		<script>
			function _ui_open(event, tab) {
				var i, tabcontent, tablinks;
				tabcontent = document.getElementsByClassName("tabcontent");
				for (i = 0; i < tabcontent.length; i++) {
					tabcontent[i].style.display = "none";
				}
				tablinks = document.getElementsByClassName("tablinks");
				for (i = 0; i < tablinks.length; i++) {
					tablinks[i].className = tablinks[i].className.replace(" active", "");
				}
				id(tab).style.display = "block";
				event.currentTarget.className += " active";
			}
		</script>
		<div id="ui-tab-Videos" class="tabcontent" style="display: block">
			<div id="_div_ms_notice" class="poly-item" style="display: none; visibility: hidden; margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 5px">This is a music channel, albums and playlists are only displayed.</h3>
			</div>
			<div id="_div_albums" class="poly-item" style="display: none; visibility: hidden; margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Albums.</h3>
				<style>
					#channel_albums {
						overflow: hidden;
					}

					.album_entry {
						width: 128px;
						height: 300px;
						padding-left: 0px;
						display: inline-table;
					}
				</style>
				<center>
					<div id="channel_albums" style="width: 100%; padding-bottom: 10px">
						<!--<div class="poly-item album_entry">
							<img style="padding-left: 0px; height: 128px; width: 128px;" src="https://i9.ytimg.com/s_p/OLAK5uy_kEf1NLDFIcLXUvPWLHElpRbDwkyb9Uops/sddefault.jpg?sqp=CNi-8eYFir7X7AMGCJeZhtoF&rs=AOn4CLD14o1Pzq8tQr0xNJvinNAKUcth5Q&v=5b418c97" />
							<h3>Beacon</h3>
							<p>11 tracks.</p>
						</div>
						<div class="poly-item album_entry">
							<img style="padding-left: 0px; height: 128px; width: 128px;" src="https://i9.ytimg.com/s_p/OLAK5uy_mSVmm4bODLkB8WFOh_C0xpWfTEqGlU_m0/sddefault.jpg?sqp=CNi-8eYFir7X7AMGCP2Y4-IF&rs=AOn4CLB0pul9znWLgMfri2nsPxGZ106nBg&v=5c58cc7d" />
							<h3>Tourist History (Deluxe Edition)</h3>
							<p>21 tracks.</p>
						</div>-->
					</div>
				</center>
			</div>
			<div id="_div_videos" class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Videos.</h3>
				<style>
					.channel_video {
						width: calc(50% - 5px);
						display: inline-flex;
						flex: 1;
						flex-basis: calc(50% - 5px);
					}

					.channel_video_idiv {
						display: table-cell;
						margin: auto 0px;
					}

					.channel_video_poly {
						padding-left: 0px !important;
						margin-right: 2px;
						margin-bottom: 2px !important;
					}

					noindex:-o-prefocus,
					#channel_videos {
						flex-direction: column !important;
						/* Opera Hack: Opera >12's FlexBox implementation sucks, fall back to dumb view. */
					}

					@media only screen and (max-width: 600px) {
						.channel_video {
							flex-basis: 100vw !important;
							width: 100% !important;
						}
					}

					@media only screen and (min-width: 1921px) {
						.channel_video {
							flex-basis: 32vw !important;
							width: 32% !important;
						}
					}
				</style>
				<div id="channel_videos" style="width: 100%; padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap"></div>
				<center style="margin-bottom: 5px">
					<button disabled="true" id="--load-more-videos" class="flat-button" style="color: inherit; background-color: inherit; font-family: inherit; padding-right: 5px">Load more.</button>
				</center>
			</div>
		</div>
		<div id="ui-tab-Live" class="tabcontent" style="display: none">
			<div id="_div_live" class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Live Content.</h3>
				<div id="channel_live" style="width: 100%; padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap"></div>
				<center style="margin-bottom: 5px">
					<button id="--load-more-live" class="flat-button" style="color: inherit; background-color: inherit; font-family: inherit; padding-right: 5px">Load more.</button>
				</center>
			</div>
		</div>
		<div id="ui-tab-Shorts" class="tabcontent" style="display: none">
			<div id="_div_shorts" class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Shorts.</h3>
				<div id="channel_shorts" style="width: 100%; padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap"></div>
				<center style="margin-bottom: 5px">
					<button id="--load-more-shorts" class="flat-button" style="color: inherit; background-color: inherit; font-family: inherit; padding-right: 5px">Load more.</button>
				</center>
			</div>
		</div>
		<div id="ui-tab-Community" class="tabcontent" style="display: none">
			<div class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 5px">Community Feed.</h3>
				<style>
					.community-feed-poll-text {
						margin-top: 5px;
						margin-bottom: 5px;
					}

					.community-feed-poll {
						margin-left: 5px;
						margin-right: 5px;
						margin-bottom: 5px;
						margin-top: 5px;
					}

					.community-feed-entry {
						text-align: left;
						width: 60vw;
					}

					.community-feed-text {
						margin-top: 5px;
						margin-bottom: 5px;
					}

					.community-feed-image {
						max-height: 60vh;
						max-width: 100%;
						margin-left: -5px;
						object-fit: contain;
						width: auto;
						height: auto;
						position: relative;
						left: 50%;
						transform: translateX(-50%);
						margin-bottom: 5px;
					}

					.community-feed-video {
						width: calc(100% + 5px);
						margin-left: -5px;
						object-fit: contain;
						height: auto;
						max-height: 100vh;
						min-height: 47.5vh;
						margin-bottom: 5px;
					}
				</style>
				<center id="--community-feed"></center>
				<center id="ui-tab-Community-load-div">
					<button id="--load-community-feed" class="flat-button" style="color: inherit; background-color: inherit; font-family: inherit; margin-bottom: 5px">Load feed.</button>
				</center>
			</div>
			<script defer="defer">
				id("--load-community-feed").onclick = function () {
					id("--load-community-feed").disabled = true;
					id("--load-community-feed").innerHTML = "Fetching...";
					if (id("--load-community-feed").hasAttribute("next-cont")) {
						const _attr = id("--load-community-feed").getAttribute("next-cont");
						if (_attr !== null && _attr !== undefined && _attr.length > 0) {
							fetch_community_feed(_attr);
						} else {
							fetch_community_feed();
						}
					} else {
						fetch_community_feed();
					}
				};
			</script>
		</div>
		<div id="ui-tab-Playlists" class="tabcontent" style="display: none">
			<div id="_div_playlists" class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Playlists.</h3>
				<div id="channel_playlists" style="width: 100%; padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap"></div>
				<center style="margin-bottom: 5px">
					<button id="--load-more-playlists" class="flat-button" style="color: inherit; background-color: inherit; font-family: inherit; padding-right: 5px">Load playlists.</button>
				</center>
			</div>
			<script defer="defer">
				id("--load-more-playlists").onclick = function () {
					id("--load-more-playlists").disabled = true;
					id("--load-more-playlists").innerHTML = "Fetching...";
					fetch_playlists();
				};
			</script>
		</div>
		<div id="ui-tab-About" class="tabcontent" style="display: none">
			<div class="poly-item" style="margin-left: -10px; margin-right: -10px">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Description.</h3>
				<p style="font-size: small; margin-bottom: 5px" id="channel_description">Nothing here.</p>
			</div>
		</div>
		<div
			id="drag_to_preview_ui"
			class="drop_area_dtpui"
			style="display: none; visibility: hidden; position: fixed; bottom: 5px; right: 5px; background-color: rgba(80, 62, 173, 0.3); width: 30%; height: 30%; justify-content: center; display: flex; align-items: center"
		>
			<h3 class="drop_area_dtpui" style="text-align: center">Drag here to preview.</h3>
		</div>
		<style id="ntube-custom-css"></style>
		<script type="text/javascript">
			var coll = document.getElementsByClassName("collapsible");
			var i;

			for (i = 0; i < coll.length; i++) {
				coll[i].addEventListener("click", function () {
					this.classList.toggle("active");
					var content = this.nextElementSibling;
					var possHeight = content.attributes.getNamedItem("maxHeight");
					if (content.style.maxHeight) {
						content.style.maxHeight = null;
					} else if (possHeight != null) {
						content.style.maxHeight = possHeight.value;
					} else {
						content.style.maxHeight = content.scrollHeight + "px";
					}
				});
			}
			function hasSettings() {
				try {
					const y = Settings.load("ntube_settings");
					return y !== null && isJson(y);
				} catch (e) {
					console.error(e);
					return false;
				}
			}
			try {
				nTube.init();
				nTube.initTheming();
			} catch (e) {}
			console.debug("Loading settings...");
			window.__SETTINGS_OBJECT = nTubeSettings.auto();
			window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
			if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
				id("poly-item-css").innerHTML = ".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
				id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
			}
			if (window.__SETTINGS_OBJECT.appearance.custom_css) {
				try {
					id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
				} catch (e) {
					console.error(e);
				}
			}
			if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
				try {
					id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
				} catch (e) {
					console.error(e);
				}
			}
			if (window.__SETTINGS_OBJECT.global) {
				if (!window.__SETTINGS_OBJECT.global.subscribers) {
					window.__SETTINGS_OBJECT.global.subscribers = [];
				}
			}
			if (window.__SETTINGS_OBJECT.global) {
				if (window.__SETTINGS_OBJECT.global.experiments) {
					if (window.__SETTINGS_OBJECT.global.experiments.new_web_features && nTubeNext.Platform.is("vendor=chrome;version>=85;feature=portals") && window.addPreviewPortal) {
						window.__allow_drag_drop_portals = "just because you can force-enable me doesn't mean you should :^)";
						id("drag_to_preview_ui").addEventListener("dragover", function (event) {
							if (window.__allow_drag_drop_portals) {
								event.preventDefault();
							}
						});
						id("drag_to_preview_ui").addEventListener("drop", function (event) {
							event.preventDefault();
							if (event && event.target && event.target.className === "drop_area_dtpui") {
								event.dataTransfer.items[0].getAsString(function (url) {
									if (url !== null && url !== undefined && url.length > 0) {
										makeHover(url);
									}
									id("drag_to_preview_ui").style.display = "none";
									id("drag_to_preview_ui").style.visibility = "hidden";
								});
							}
						});
					}
				}
			}
		</script>
	</body>
</html>
